<template>
  <div>
    <h2>用户借款数据表</h2>
    理财名称<input type="text" v-model="state.Bname" /> 利息值<select
      v-model="state.BL_id"
    >
      <option value="">请选择</option>
      <option v-for="item in list1" :value="item.BL_id">
        每年{{ item.BL_num }}%
      </option>
    </select>
    <input type="button" value="查询" @click="cha" />
    <table class="table" border="1">
      <tr>
        <td>借款ID</td>
        <td>借款名称</td>
        <td @click="Order">借款最高金额</td>
        <td>借款年限</td>
        <td>利息</td>
        <td>借款简介</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{ item.BL_id }}</td>
        <td>{{ item.Bname }}</td>
        <td>{{ item.Max_money }}</td>
        <td>{{ item.B_year }}</td>
        <td>{{ item.BL_num }}%</td>
        <td>{{ item.Bremark }}</td>
        <td><input type="button" value="借款" @click="Jie(item.Bid)" /></td>
      </tr>
    </table>
    共有<span>{{ count }}</span
    >条数据, 每页显示<span>{{ state.pagesize }}</span
    >条数据, 当前<span>{{ state.pageindex }}</span
    >/<span>{{ pcount }}</span
    >页
    <input type="button" @click="go('first')" value="首页" />
    <input type="button" @click="go('on')" value="上一页" />
    <input type="button" @click="go('next')" value="下一页" />
    <input type="button" @click="go('end')" value="尾页" />
    <select v-model="state.pagesize" @change="Jump">
      <option v-for="item in arr" :value="item">每页{{ item }}条</option>
    </select>
    <input type="text" size="1" v-model="state.pageindex" />
    <input type="button" value="go" @click="qu" />
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { reactive, toRefs, onMounted } from 'vue';
let data = reactive({
  state: {
    Bname: '',
    BL_id: '',
    pagesize: 2,
    pageindex: 1,
    folg: 'true'
  },
  list: {},
  list1: {},
  count: '',
  pcount: '',
  arr: [2, 4, 6, 8]
});
let { list, count, pcount, arr, state, list1 } = toRefs(data);
onMounted(() => {
  getlist();
  getlist1();
});
//获取利息下拉框
function getlist() {
  axios({
    url: 'http://localhost:51322/api/Borrow/GetLixiInfo',
    method: 'get'
  })
    .then((res) => {
      console.log(res);
      list1.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
}
function getlist1() {
  axios({
    url: 'http://localhost:51322/api/Borrow/GetBorrowList',
    method: 'get',
    params: state.value
  })
    .then((res) => {
      console.log(res);
      (list.value = res.data.data),
        (count.value = res.data.Count),
        (pcount.value = res.data.Pcount);
    })
    .catch((err) => {
      console.log(err);
    });
}
function Jie(id:any) {
  router.push({
    path:"/Borrowadd",
    query:{
      id:id
    }
  })
}
function go(sty: any) {
  switch (sty) {
    case 'first':
      if (state.value.pageindex == 1) {
        alert('已经是首页');
        return;
      }
      state.value.pageindex = 1;
      break;
    case 'on':
      if (state.value.pageindex == 1) {
        alert('已经是首页');
        return;
      }
      state.value.pageindex--;
      break;
    case 'next':
      if (state.value.pageindex == pcount.value) {
        alert('已经是尾页');
        return;
      }
      state.value.pageindex++;
      break;
    case 'end':
      if (state.value.pageindex == pcount.value) {
        alert('已经是首页');
        return;
      }
      state.value.pageindex = pcount.value;
      break;
  }
  getlist1();
}
function Jump() {
  getlist1();
}
function qu() {
  if (state.value.pageindex < 1) {
    alert('当前页索引不能小于1');
    state.value.pageindex = 1;
    return;
  }
  if (isNaN(state.value.pageindex) == true) {
    alert('当前页索引只能为数字');
    state.value.pageindex = 1;
    return;
  }
  if (state.value.pageindex > Number(pcount.value)) {
    alert('当前页索引不能大于总页数');
    state.value.pageindex = 1;
    return;
  }
  getlist1();
}
function cha() {
  getlist1();
}
function Order() {
  if (state.value.folg == 'true') {
    state.value.folg = 'false';
  } else {
    state.value.folg = 'true';
  }
  getlist1();
}
</script>

<style scoped></style>
